<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-02 16:09:35
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-04 10:24:40
 * @FilePath: home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useUserStore, useCommonStore } from '@/stores/index.js'
import { useRouter } from 'vue-router'
import api from "@/api/api.js"
import homeListItem from "@/components/home/homeListItem.vue";
import { isZxcxAPP, zxcxPushToNotiAction } from "@/utils/zxcxWebkit.js"
// 图片导入
import chatIcon from '@/assets/home/chat.png'
import hasCarIcon from '@/assets/home/hasCaricon.png'
import noCarIcon from '@/assets/home/icon.png'
import duiIcon from '@/assets/home/dui.png'
import yibiaopanIcon from "@/assets/home/yibiaopan.png"
import carIcon from "@/assets/home/car.png"

// 使用 store 和 router
const store = useUserStore()
const commonStore = useCommonStore()
const router = useRouter()

// 响应式数据
const nocarList = ref(["平台监管", "透明修车", "安心服务"])
const options = ref([])
const hasCar = ref(false)
const carInfo = ref({})
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const pageInfo = ref({
  pageNum: 1,
  pageSize: 10,
})
const systemList = ref([])
const largeBannerList = ref([])
const smallBannerList = ref([])

// 计算属性
const carList = computed(() => store.carList)
const locationInfo = computed(() => store.locationInfo)
const currentCarIndex = computed(() => commonStore.currentCarIndex)
const hasMessage = computed(() => systemList.value.filter((item) => item.status == 0).length > 0)

// 监听器
watch(carList, () => {
  if (carList.value.length) {
    hasCar.value = true
    carInfo.value = carList.value[currentCarIndex.value]
  }
}, {
  immediate: true
})

// 方法
const onLoad = () => {
  getHomeGoods()
}

const goToAddCar = () => {
  router.push({
    path: "/addCar",
  })
}

const goLocation = () => {
  router.push({
    path: "/location",
  })
}

const goSearch = () => {
  router.push({
    path: "/search",
  })
}

const goWeiquan = () => {
  router.push({
    path: "/addWeiquan",
  })
}

const chat = () => {
  router.push({
    path: "/chat",
  })
}

const goMessage = () => {
  router.push({
    path: "/systemMessage",
  })
}

const goDetail = (v) => {
  router.push({
    path: "/serveDetail",
    query: {
      goodsId: v.id,
    },
  })
}

const jump = (item) => {
  router.push({
    path: "/baoyang",
    query: {
      id: item.id,
    },
  })
}

const init = () => {
  getHomeCategory()
  getSystemMessageList()
  getBannerList()
}

const getHomeCategory = async () => {
  let params = {
    isTop: "true",
    type: 0,
    keyWords: "",
    parentId: "",
  }
  let res = await api.common.gethomeCategory(params)
  options.value = res.filter((v, i) => i < 4)
}

const getHomeGoods = () => {
  let params = {
    ...pageInfo.value,
  }
  api
    .common.getHomeGoods(params)
    .then((res) => {
      if (res.data.length == 0) {
        finished.value = true
      }
      list.value = [...list.value, ...res.data].filter(
        (v) => v.id != "1952191044194463746"
      )
      if (res.data.length < pageInfo.value.pageSize) {
        finished.value = true
      } else {
        pageInfo.value.pageNum++
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const getSystemMessageList = async () => {
  let res = await api.message.systemLog({
    pageNum: 1,
    pageSize: 100,
  })
  systemList.value = [...systemList.value, ...res.data]
}

const getBannerList = async () => {
  largeBannerList.value = await api.common.getHomeBannerList({
    positionType: 1,
  })
  smallBannerList.value = await api.common.getHomeBannerList({
    positionType: 2,
  })
}

const link = (v) => {
  switch (v.type) {
    case 0:
      //无事件
      return
    case 1:
      //商品详情
      router.push({
        path: "/serveDetail",
        query: {
          goodsId: v.keyId,
        },
      })
      break
    case 2:
      //外链
      window.location.href = `${v.url}`
      break
    case 3:
      //商品种类
      break
    case 4:
      //爆品活动
      router.push({
        path: "/hotActive",
        query: {
          id: v.keyId,
        },
      })
      break
    case 5:
      //直播
      break
    case 6:
      //新闻
      if (isZxcxAPP()) {
        zxcxPushToNotiAction({
          contentType: 1,
          contentTypeId: v.keyId,
        })
      }
      break
    case 7:
      //帖子
      if (isZxcxAPP()) {
        zxcxPushToNotiAction({
          contentType: 12,
          contentTypeId: v.keyId,
        })
      }
      break
  }
}

// 生命周期钩子
onMounted(() => {
  init()
})

// activated 钩子（如果使用了 keep-alive）
// 注意：如果需要 activated 钩子，需要在父组件中使用 defineExpose 暴露
const activated = () => {
  if (carList.value.length) {
    hasCar.value = true
    carInfo.value = carList.value[currentCarIndex.value]
  }
}

// 如果组件被 keep-alive 包裹，需要导出 activated 方法
defineExpose({
  activated
})
</script>

<template>
  <div class="home">
    <div class="top">
      <div class="address">
        <van-icon name="location-o" />
        {{ locationInfo.district || "长兴县" }}
      </div>
      <div class="search" @click="goSearch">
        <van-icon name="search" color="#bfbfbf" class="search-icon" />
        <span class="placeholder">汽车保养</span>
      </div>
      <van-badge :dot="hasMessage">
        <van-image width="100%" height="100%" class="chat" :src="chatIcon" @click="goMessage"></van-image>
      </van-badge>
    </div>
    <div class="car" :style="{
      background: hasCar
        ? '#fff'
        : 'linear-gradient(to right, #0163eb, #00bffa)',
    }">
      <van-image class="icon" fit="contain" :src="hasCar ? hasCarIcon : noCarIcon" />
      <div v-if="!hasCar" class="nocar">
        <div v-for="(v, i) in nocarList" :key="JSON.stringify(v) + i" class="nocar_item"
          :class="{ margin_right: i === 1 }">
          <van-image class="nocar_icon" :src="duiIcon" style="margin-right: 15px" />
          {{ v }}
        </div>
        <div class="add_car" @click="goToAddCar">+<span>添加爱车</span></div>
      </div>
      <div v-if="hasCar" class="hascar">
        <div class="car_info">
          <div class="flex_1">
            <div class="car_name">{{ carInfo.brand }}<span>▼</span></div>
            <div class="number_plate">
              <div class="number_1" :style="{
                'background-color':
                  carInfo.plateNumber.length === 8 ? '#56d3a1' : '#406dfc',
              }">
                {{ carInfo.plateNumber.substr(0, 2) }}
              </div>
              <div class="number_2">
                {{
                  carInfo.plateNumber.substr(
                    2,
                    carInfo.plateNumber.trim().length
                  )
                }}
              </div>
            </div>
          </div>
          <div class="flex_2">
            <van-image class="yibiaopan" :src="yibiaopanIcon" />
            <span class="meter">{{ carInfo.mileage || 0 }}</span>KM
            <!-- <van-icon name="edit" class="edit" style="margin-left: 10px" /> -->
          </div>
        </div>
        <van-image class="car_icon" :src="carIcon" />
      </div>
    </div>
    <div class="options">
      <van-grid :column-num="4" square>
        <van-grid-item v-for="(v, i) in options" :key="JSON.stringify(v) + i" @click="jump(v)">
          <template #text>
            <span class="options_text">
              {{ v.name }}
            </span>



          </template>
          <template #icon>
            <div class="options_icon">
              <van-image width="100%" height="100%" fit="cover" :src="v.url" />
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="box">
      <div class="box_item_1" @click="chat"></div>
      <div class="box_item_2" @click="goWeiquan"></div>
    </div>
    <div v-if="smallBannerList.length || largeBannerList.length" class="h5">
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="(v, i) in smallBannerList" :key="i" @click="link(v)">
          <van-image :src="v.picUrl" radius="10" height="100%" />
        </van-grid-item>
      </van-grid>
      <van-swipe :style="{
        'margin-top':
          largeBannerList.length > 0 && smallBannerList.length
            ? '10px'
            : 'unset',
      }" autoplay="2000" loop :show-indicators="false">
        <van-swipe-item v-for="(v, i) in largeBannerList" :key="i" @click="link(v)">
          <van-image width="100%" :src="v.picUrl" radius="8" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="list">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="flex">
          <homeListItem v-for="(v, i) in list" :type="1" :key="JSON.stringify(v) + i" :item="v"
            @click.native="goDetail(v)">
          </homeListItem>
        </div>
      </van-list>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 43px 17px 60px 17px;
  position: relative;

  .top {
    position: fixed;
    padding: 10px 17px;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #deeff1;
    z-index: 999;

    .address {
      font-size: 15px;
    }

    .search {
      width: 283px;
      height: 0.25rem;
      background: #fff;
      border-radius: 333px;
      padding: 7px 0 7px 13px;
      display: flex;
      align-items: center;

      .search-icon {
        font-size: 15px;
      }

      .placeholder {
        color: #bfbfbf;
        font-size: 15px;
        margin-left: 3px;
      }
    }

    :deep(.van-badge__wrapper) {
      height: 26px;
      width: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat {
      width: 26px !important;
      height: 26px !important;
    }
  }

  .car {
    margin-top: 13px;
    width: 100%;
    height: 80px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 8px 35px 8px 22px;

    .icon {
      max-width: 41px;
      min-height: 41px;
      min-width: 41px;
    }

    .nocar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-left: 36px;

      &_icon {
        width: 22px;
      }

      &_item {
        min-width: 92px;
        height: 23px;
        font-size: 15px;
        margin-bottom: 7px;
        color: #dee6ff;
        display: flex;
        align-items: center;
      }

      .margin_right {
        margin-right: 17px;
      }

      .add_car {
        width: 123px;
        height: 33px;
        background: #fff;
        border-radius: 333px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #179cf4;
        font-size: 15px;
        font-weight: bold;
      }
    }

    .hascar {
      display: flex;
      margin-left: 36px;

      .car_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 208px;

        .flex_1,
        .flex_2 {
          display: flex;
          align-items: center;
        }

        .flex_1 {
          font-size: 18px;

          span {
            font-size: 15px;
          }

          .car_name {
            font-size: 18px;
          }

          .number_plate {
            display: flex;
            align-items: center;
            height: 18px;
            width: 77px;
            font-size: 12px;
            margin-left: 7px;

            .number_1 {
              width: 40%;
              height: 100%;
              letter-spacing: 1px;
              text-align: center;
              color: #fff;
              line-height: 18px;
              border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;
            }

            .number_2 {
              width: 60%;
              height: 100%;
              box-sizing: border-box;
              border-top: 1px solid #c0dbfb;
              border-right: 1px solid #c0dbfb;
              border-bottom: 1px solid #c0dbfb;
              text-align: center;
              border-top-right-radius: 3px;
              border-bottom-right-radius: 3px;
            }
          }
        }

        .flex_2 {
          margin-top: 5px;
          font-size: 15px;
          align-items: baseline;

          .meter {
            font-size: 13px;
            margin-left: 3px;
          }

          .yibiaopan {
            width: 18px;
            height: 14px;
          }

          .edit {
            font-size: 15px;
          }
        }
      }

      .car_icon {
        width: 72px;
        height: 53px;
      }
    }
  }

  .options {
    padding: 18px 0;

    &_text {
      font-size: 15px;
    }

    &_icon {
      min-width: 53px;
      max-width: 53px;
    }
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 74px;

    &_item_1 {
      background: url("@/assets/home/btn_bg1.png") no-repeat;
      background-size: cover;
      height: 100%;
      width: 49%;
    }

    &_item_2 {
      background: url("@/assets/home/btn_bg2.png") no-repeat;
      background-size: cover;
      height: 100%;
      width: 49%;
    }
  }

  .h5 {
    margin-top: 16px;
    width: 100%;
    border-radius: 7px;
    padding: 7px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #00c0fa, #015fea);

    :deep(.van-swipe) {
      aspect-ratio: 4;

      .van-image {
        height: 100%;
      }
    }
  }

  .list {
    width: 100%;
    margin-top: 10px;

    .flex {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
  }

  :deep(.van-grid-item__content) {
    background: transparent !important;
    padding: 0;
    margin: 0 5px;
  }
}
</style>
